<template>
    <view class="viewport">
        <!-- 推荐封面 -->
        <view class="cover">
            <image :src="bannerPicture"></image>
        </view>
        <!-- tab栏 -->
        <view class="tabs">
            <text class="text" v-for="(item, index) in recommendList" :key="index"
                :class="{ active: index === activeIndex }" @tap="changeTabs(index)">
                {{ item.title }}
            </text>
        </view>
        <!-- 列表内容 -->
        <scroll-view scroll-y class="scroll-view" @scrolltolower="handleScrolltolower"
            v-for="(item, index) in recommendList" :key="index" v-show="activeIndex === index">
            <view class="goods">
                <navigator hover-class="none" class="navigator" v-for="goods in item.goodsItems.items" :key="goods.id"
                    :url="`/pages/goods/index?id=${goods.id}`">
                    <image class="thumb" :src="goods.picture"></image>
                    <view class="name ellipsis">{{ goods.name }}</view>
                    <view class="price">
                        <text class="symbol">¥</text>
                        <text class="number">{{ goods.price }}</text>
                    </view>
                </navigator>
            </view>
            <view class="loading">正在加载...</view>
        </scroll-view>
    </view>
</template>

<script>
import { getHomeRecommend } from '@/api/home'
export default {
    data() {
        return {
            // 背景大图
            bannerPicture: "",
            // 当前显示的tab栏
            activeIndex: 0,
            // 列表数据
            recommendList: [],
        }
    },
    async onLoad({ type }) {
        // type 上一个页面 传递过来的 数据
        // 标题 和 接口的url地址 前端写死
        const urlMap = {
            1: { title: "特惠推荐", url: "/home/preference/mutli" },
            2: { title: "爆款推荐", url: "/home/inVogue/mutli" },
            3: { title: "一站买全", url: "/home/oneStop/mutli" },
            4: { title: "领券中心", url: "/home/new/mutli" }, // 后端未提供，暂用新鲜好物url
            5: { title: "新鲜好物", url: "/home/new/mutli" },
        };

        this.isloading = false; // 表示没有人在发送请求 

        // 确定用户点击的是哪个数据
        this.currentItem = urlMap[type];

        // 动态设置页面的标题
        uni.setNavigationBarTitle({ title: this.currentItem.title })

        // 发送请求获取数据 
        // 首次加载可以不携带参数 用默认的即可
        const res = await getHomeRecommend(this.currentItem.url);
        // console.log(res);

        // 设置背景大图
        this.bannerPicture = res.result.bannerPicture

        // 修改数据变成我们想要的样子
        this.recommendList = this.recommendList = res.result.subTypes.map((v) => ({
            id: v.id,
            title: v.title,
            goodsItems: res.result.goodsItems[v.id],
        }));
    },
    methods: {
        // 点击tab标题 切换选中
        changeTabs(index) {
            this.activeIndex = index;
        },

        // 分页事件 滚动条触底事件
        async handleScrolltolower() {
            /* 
            1 先判断有没有下一页数据
              1 当前页码 page 和 总页数 pages
            2 页码+1
            3 重新发送请求获取数据
            4 数据返回了，数组 追加元素 | 获取最新page 更新到自己的data中
            5 优化
              1 节流
            */

            // 获取当前 显示的 tab项目的id
            const id = this.recommendList[this.activeIndex].id

            let { page, pages, pageSize } = this.recommendList[this.activeIndex].goodsItems

            if (!this.isloading && page < pages) {
                this.isloading = true; // 有人在发送请求，将isloading的值改为true
                // 还有下一页数据
                page++;
                const res = await getHomeRecommend(this.currentItem.url, { page, pageSize, subType: id });
                // 更新页码
                this.recommendList[this.activeIndex].goodsItems.page = res.result.goodsItems[id].page;
                // 数组追加数据
                this.recommendList[this.activeIndex].goodsItems.items = [
                    ...this.recommendList[this.activeIndex].goodsItems.items,
                    ...res.result.goodsItems[id].items,
                ];
                // 请求发送完毕 将isloading的值改回false
                this.isloading = false
            }
        },
    },
};
</script>

<style lang="scss">
page {
    height: 100%;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 180rpx 0 0;
    position: relative;
}

.cover {
    width: 750rpx;
    height: 225rpx;
    border-radius: 0 0 40rpx 40rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

.tabs {
    display: flex;
    justify-content: space-evenly;
    height: 100rpx;
    line-height: 90rpx;
    margin: 0 20rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
    color: #333;
    background-color: #fff;
    position: relative;
    z-index: 9;

    .text {
        margin: 0 20rpx;
        position: relative;
    }

    .active {
        &::after {
            content: "";
            width: 40rpx;
            height: 4rpx;
            transform: translate(-50%);
            background-color: #27ba9b;
            position: absolute;
            left: 50%;
            bottom: 24rpx;
        }
    }
}

.scroll-view {
    flex: 1;
    overflow: hidden;
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;

    .navigator {
        width: 345rpx;
        padding: 20rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
        background-color: #fff;
    }

    .thumb {
        width: 305rpx;
        height: 305rpx;
    }

    .name {
        height: 88rpx;
        font-size: 26rpx;
    }

    .price {
        line-height: 1;
        color: #cf4444;
        font-size: 30rpx;
    }
}

.goods .symbol,
.goods .decimal {
    font-size: 70%;
}
</style>
